<template>
	<a-card :bordered="false">
		<div class="table-page-search-wrapper">
			<a-form layout="inline">
				<a-row :gutter="48">
					<a-col :md="24" :sm="24">
						<a-form-item label="归属公司：">
							<FCOrgRadioGroup v-model="queryParam.orgId" :filter-types="[$businessEnum.ORG_TYPE_ENUM.COMPANY.id]" />
						</a-form-item>
					</a-col>
					<a-col :md="8" :sm="24">
						<a-form-item label="生产单号">
							<a-input v-model="queryParam.orderNumber" placeholder="请输入生产单号" />
						</a-form-item>
					</a-col>

					<a-col :md="!advanced && 8 || 24" :sm="24">
						<span class="table-page-search-submitButtons"
							:style="advanced && { float: 'right', overflow: 'hidden' } || {}">
							<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
							<a-button style="margin-left: 8px"
								@click="() => { queryParam = {}; $refs.table.refresh(true) }">重置</a-button>
						</span>
					</a-col>
					<!-- <a-col :md="24" :sm="24">
						<a-form-item label="是否可用：">
							<a-radio-group :default-value="null" button-style="solid" v-model="queryParam.status">
								<a-radio-button :value="null">全部</a-radio-button>
								<a-radio-button :value="0">可用</a-radio-button>
								<a-radio-button :value="1">不可用</a-radio-button>
							</a-radio-group>
						</a-form-item>
					</a-col> -->
				</a-row>
			</a-form>
		</div>

		<div class="table-operator">
			<template>
				<a-button type="primary" @click="pickingPoolExport" v-if="hasPerm('emsOrder:doScheduleProduction')">
					导出领料单
				</a-button>
			</template>
		</div>

		<s-table ref="table" size="default" :columns="columns" :data="loadData" :alert="true"
			:rowKey="(record) => record.orderId"
			:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">


			<span slot="action" slot-scope="text, record">
				<template v-if="record.isOverseasStore == 'N'">
					<a @click="$refs.editForm.disabledShow(record)">详情</a>
					<a-divider type="vertical" />
					<a @click="$refs.productList.readonly(record,
						{ title: '产品列表', viewState: 'productionPool', materialType: $businessEnum.MATERIAL_TYPE_ENUM.product.id })">
						产品列表</a>
					<template v-if="hasPerm('emsOrder:edit')">
						<a-divider type="vertical" />
						<a-popconfirm placement="topRight" title="确认删除？" @confirm="() => del(record)">
							<a>删除</a>
						</a-popconfirm>
					</template>
				</template>
				<template v-else>
					<a @click="$refs.editForm.disabledShow(record)">详情</a>
					<a-divider type="vertical" />
					<a
						@click="$refs.productList.readonly(record,
							{ title: '产品列表', viewState: 'productionPool', materialType: $businessEnum.MATERIAL_TYPE_ENUM.overseasProduct.id })">
						产品列表</a>
					<template v-if="hasPerm('emsOrder:edit')">
						<a-divider type="vertical" />
						<a-popconfirm placement="topRight" title="确认删除？" @confirm="() => del(record)">
							<a>删除</a>
						</a-popconfirm>
					</template>

				</template>
			</span>

		</s-table>

		<edit-form ref="editForm" @ok="handleOk" />
		<product-list ref="productList" />

		<!--  排单生产提示  -->
		<a-modal title="导出" :okText="'确认导出'" :confirmLoading="dwnLoading" :visible="visible" @ok="handleExport"
			@cancel="visible = false">
			<div>
				<div style="margin: 10px 0px;font-weight: bold;">
					请选择仓库类型：
				</div>
				<a-checkbox-group v-model="materialTypeList">
					<a-checkbox :value="item.id" :key="item.id" v-for="item in [
						this.$businessEnum.MATERIAL_TYPE_ENUM.material,
						this.$businessEnum.MATERIAL_TYPE_ENUM.customized,
						this.$businessEnum.MATERIAL_TYPE_ENUM.packing,
						this.$businessEnum.MATERIAL_TYPE_ENUM.cable,
					]">
						{{ item.name }}
					</a-checkbox>
				</a-checkbox-group>
			</div>
			<div>
				<div style="margin: 10px 0px;font-weight: bold;">
					请选择班组：
				</div>
				<a-radio-group :default-value="null" button-style="solid" v-model="currentTeamId">
					<a-radio-button v-for="(item, index) in teamList" :key="index" :value="item.classGroupId">
						{{ item.name }}
					</a-radio-button>
				</a-radio-group>
			</div>
		</a-modal>
	</a-card>
</template>

<script>
import { STable } from '@/components'
import { page, addPicking, pickingPoolExport } from '@/api/modular/main/emsorder/emsOrderManage'
import { getUrlParam } from '@/utils/util'
import editForm from '@/views/main/emsorder/emsOrderEditForm'
import ProductList from './productList'
import FCOrgRadioGroup from '@/components/FcOrgRadioGroup/FCOrgRadioGroup'
import { page as teamPage } from '@/api/modular/main/classGroup/classGroup'

export default {
	components: {
		STable,
		editForm,
		ProductList,
		FCOrgRadioGroup
	},
	data() {
		return {
			advanced: false, // 高级搜索 展开/关闭
			queryParam: {},  // 查询参数
			columns: [
				{
					title: '序号', width: '80px',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '生产单号',
					dataIndex: 'orderNumber'
				},
				{
					title: '归属子公司',
					dataIndex: 'targetOrgName'
				},
				{
					title: '是否海外仓',
					dataIndex: 'isOverseasStore',
					customRender: (text, record, index) => record.isOverseasStore == 'Y' ? '是' : '否'
				},
				{
					title: '录入时间',
					dataIndex: 'createTime'
				},
				{
					title: '预计完成时间',
					dataIndex: 'estimateCompletionTime'
				},
				{
					title: '操作',
					dataIndex: '',
					width: '220px',
					scopedSlots: { customRender: 'action' }
				}
			],
			// 加载数据方法 必须为 Promise 对象
			loadData: parameter => {
				this.queryParam.orderType = this.orderType
				this.queryParam.isAddPicking = 2
				this.queryParam.executeStatus = this.executeStatus
				return page(Object.assign(parameter, this.queryParam)).then((res) => {
					return res.data
				})
			},
			visible: false,
			selectedRowKeys: [],
			selectedRows: [],
			teamList: [],
			currentTeamId: null,
			dwnLoading: false,
			materialTypeList: [],
		}
	},
	computed: {
		orderType() {
			return this.$businessEnum.ORDER_TYPE_ENUM.produceOrder.id
		},
		executeStatus() {
			return this.$businessEnum.EXECUTE_STATUS_ENUM.DRAFT.id
		},
	},
	methods: {
		del(record) {
			addPicking({
				orderIds: [record.orderId],
				isAddPicking: 1,
			}).then((res) => {
				if (res.success) {
					this.$message.success('删除成功')
					this.$refs.table.refresh()
				} else {
					this.$message.error('删除失败：' + res.message)
				}
			}).catch((err) => {
				this.$message.error('删除错误：' + err.message)
			})
		},
		toggleAdvanced() {
			this.advanced = !this.advanced
		},
		handleOk() {
			this.$refs.table.refresh()
			this.$refs.table.clearSelected()
		},
		onSelectChange(selectedRowKeys, selectedRows) {
			this.selectedRowKeys = selectedRowKeys
			this.selectedRows = selectedRows
		},
		pickingPoolExport() {
			this.currentTeamId = null
			this.materialTypeList = null
			teamPage({
				pageSize: -1,
				status: 0
			}).then(res => {
				this.teamList = res.data.rows;
				this.visible = true;
			})
		},
		handleExport() {
			// console.log(this.currentTeamId);
			// if (!this.currentTeamId) {
			// 	this.$message.error("请先选择班组");
			// 	return
			// }
			this.dwnLoading = true;
			this.download("/emsOrder/pickingPoolExport", { classGroupId: this.currentTeamId, materialTypeList: this.materialTypeList }, `领料单_${this.dayjs(new Date()).format('YYYY/MM/DD HH:mm:ss')}.xlsx`, null, true).then(res => {
				this.dwnLoading = false
			})
		},
	}
}
</script>

<style lang="less">
.table-operator {
	margin-bottom: 18px;
}

button {
	margin-right: 8px;
}
</style>
